{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% load thumbnail %}
{% block extralinks %}
<style>
  .form-group label {
    font-weight: 800;
  }
</style>
{% endblock %}
{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a class="primary_btn" href="{% url 'contacts:add_contact'%}"><i class="fa fa-plus"></i>
          Add New Contact</a></span>
    </div>
  </div>
  <div class="filter_row list_filter_row row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="contacts_filter" action="" method="POST">
            <div class="card-body">
              <div class="card-title">Filters</div>
              <div class="row marl">
                <div class="filter_col col-md-3">
                  <div class="form-group">
                    <label for="exampleInputEmail1">NAME</label>
                    <input type="text" class="form-control" placeholder="First Name" name="first_name"
                      value="{{request.POST.first_name}}">
                  </div>
                </div>
                <div class="filter_col col-md-3">
                  <div class="form-group">
                    <label for="exampleInputEmail1">CITY</label>
                    <input type="text" class="form-control" placeholder="City" name="city"
                      value="{{request.POST.city}}">
                  </div>
                </div>
                <div class="filter_col col-md-3">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Assigned To</label>
                    <select class="assigned_users form-control" name="assigned_to" multiple="multiple">
                      {% for user in users %}
                        <option value="{{user.id}}" {% if user.id in assignedto_list %} selected="" {% endif %}>
                          {% if user.username %}{{user.username}}{% else %}{{user.email}}{% endif %}</option>                  
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="filter_col text-center col-3">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'contacts:list' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="table_container_row row marl ">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="card-title text-right">

            <span class="float-left">Contacts - {% if show_pageitems %} {% show_pageitems %}{% else %}
              {{contact_obj_list|length}}{% endif %}</span>

            <span class="filter_toggle">
              <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
            </span>

          </div>
          <div class="table-responsive">
            <table class="table">
              <thead>
                {% if contact_obj_list|length > 0 %}
                <tr>
                  <th width="5%">S.no</th>
                  <th width="20%">Name</th>
                  <th width="20%">Assigned To</th>
                  <th width="15%">City</th>
                  <th width="15%">State</th>
                  <th width="15%">Created On</th>
                  <th width="15%">Actions</th>
                </tr>
                {% endif %}
              </thead>
              <tbody>
                {% if per_page %}
                {% paginate per_page contact_obj_list %}
                {% else%}
                {% paginate 10 contact_obj_list %}
                {% endif %}
                {% for contact in contact_obj_list %}
                <tr style="text-align:center;">
                  <td scope="row">{{ forloop.counter }}</td>
                  <td><a href="#" data-toggle="modal"
                      data-target="#exampleModalCenter_contact{{contact.id}}">{{contact.first_name}}
                      {{contact.last_name}}</a></td>
                  <td>
                    {% with contact_users=contact.get_team_and_assigned_users %}
                    {% for user in contact_users %}
                    {% if user.profile_pic %}
                    {% thumbnail user.profile_pic "40x40" crop="center" as im %}
                    <a href="{% url 'common:view_user' user.id %}">
                      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" title="{{ user.email }}">
                    </a>
                    {% endthumbnail %}
                    {% else %}
                    <a href="{% url 'common:view_user' user.id %}">
                      <img src="{% static 'images/user.png' %}" title="{{ user.email }}" width="40" height="40">
                    </a>
                    {% endif %}
                    {% empty %}
                    None
                    {% endfor %}
                    {% endwith %}
                  </td>
                  <td>
                    {% if contact.address.city %}
                    {{contact.address.city}}
                    {% else %}
                    Not Specified
                    {% endif %}
                  </td>
                  <td>
                    {% if contact.address.state %}
                    {{contact.address.state}}
                    {% else %}
                    Not Specified
                    {% endif %}
                  </td>
                  <td title="{{contact.created_on}}">{{contact.created_on_arrow}}</td>
                  <td class="actions">
                    <a href="{% url 'contacts:view_contact' contact.id %}" class="btn btn-info view" title="View" ><i
                        class="fas fa-eye"></i></a>
                    <a href="{% url 'contacts:edit_contact' contact.id%}" class="btn btn-success edit" title="Edit"><i
                        class="fas fa-pencil-alt"></i></a>
                    {% if request.user == contact.created_by or request.user.role == "ADMIN" or request.user.is_superuser %}
                    <a href="{% url 'contacts:remove_contact' contact.id %}"
                      class="btn btn-danger delete remove_account" title="Delete" ><i class="fas fa-trash-alt"></i></a>
                    {% endif %}
                  </td>
                </tr>
                {% endfor%}
              </tbody>
            </table>
          </div>
          {%ifequal contact_obj_list|length 0 %}
          <h6 class="text-center">No Contact Records Found</h6>
          {%endifequal%}
          <div class="marl row text-center">
            {% show_pages %}
          </div>
        </div>
      </div>
    </div>
    <br clear="all">
  </div>
  
</div>



{% for contact_record in contact_obj_list %}

<div class="modal fade" id="exampleModalCenter_contact{{contact_record.id}}" tabindex="-1" role="dialog"
  aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">{{ contact_record.first_name }}
          {{ contact_record.last_name }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="" id="">
          <div class="">
            <div class="col-md-12" id="">
              <div class="card">

                <div class="card-body" id="datashow" style="margin: 0; padding: 0;">

                  <div class="card-title text-right">
                    <h5>
                      
                      <span class="" style="margin-top: 0px">
                        
                      </span>
                    </h5>
                  </div>

                  <div class="row marl">
                    <div class="col-md-4">
                      <div class="filter_col col-md-12" id="iname">
                        <div class="form-group">
                          <label class="contact_field_label" for="id_name" data-name="name">Name</label>
                          <div class="contact_field" id="contact_name" data-name="name">{{ contact_record.first_name }}
                            {{ contact_record.last_name }}</div>
                        </div>
                      </div>
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="contact_field_label" for="id_phone" data-name="name">Phone</label>
                          <div class="contact_field" id="contact_phone" data-name="name">{{ contact_record.phone }}
                          </div>
                        </div>
                      </div>

                    </div>
                    <div class="col-md-4">
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          <label class="contact_field_label" for="id_email" data-name="name">Email</label>
                          <div class="contact_field" id="contact_email" data-name="name">{{ contact_record.email }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="filter_col col-md-12">
                        <div class="form-group">
                          {% if contact_record.address.address_line or contact_record.address.street or contact_record.address.city or  contact_record.address.state or contact_record.address.postcode or contact_record.address.country %}
                          <label class="contact_field_label" for="id_address" data-name="name">Billing Address</label>
                          <div class="contact_field" id="contact_address" data-name="name">
                            {{contact_record.address.get_complete_address}}
                          </div>
                          {% endif %}
                        </div>
                      </div>
                      <div class="filter_col col-md-12">
                        
                      </div>
                    </div>
                    <div class=" ml-2 col-md-12">
                      <div class="form-group">
                        {% if contact_record.description %}
                        <label class="contact_field_label" for="id_description" data-name="name">Description</label>
                        <div class="contact_field ml-1" id="contact_description" data-name="name">
                          {{ contact_record.description }}
                        </div>
                        {% endif %}
                      </div>
                      <div class="created_information">
                        Created by <b>{{ contact_record.created_by }}</b> created on
                        <b title="{{ contact_record.created_on }}">{{ contact_record.created_on_arrow }}</b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

{% endfor %}



{%endblock%}
{% block js_block %}
<script type="text/javascript">
  $(document).ready(function () {
    $('.assigned_users').select2();
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
  });

  search = "{{search}}"

  if (search == 'True') {
    $(".list_filter_row").show();
  }
  $('.delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

  $("a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#contacts_filter').attr("action", $(this).attr("href"));
    $('#contacts_filter').submit();
  });
</script>
{% endblock js_block %}
